<template>
  <router-link to="/about" class="logo" :class="{ 'is-transparent': isTransparent }">
    <div class="logo-icon">
      <div class="star-container">
        <span class="star-main">✦</span>
        <span class="star-glow">⋆</span>
      </div>
      <div class="sparkles">
        <span class="sparkle">·</span>
        <span class="sparkle">·</span>
        <span class="sparkle">·</span>
      </div>
    </div>
    <div class="logo-text">
      <div class="text-wrapper">
        <span class="text-star">Star</span>
        <span class="text-mist">Mist</span>
      </div>
    </div>
  </router-link>
</template>

<script setup lang="ts">
defineProps({
  isTransparent: {
    type: Boolean,
    default: false
  }
});
</script>

<style scoped lang="less">
.logo {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  border-radius: 16px;
  position: relative;
  text-decoration: none;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

  &:hover {
    transform: translateY(-1px);

    .logo-icon {
      .star-container {
        transform: rotate(180deg);

        .star-main {
          transform: scale(1.2);
          filter: brightness(1.2);
        }

        .star-glow {
          opacity: 0.8;
          transform: scale(1.1);
        }
      }

      .sparkles .sparkle {
        opacity: 1;
        transform: translate(0, 0) scale(1);
      }
    }
  }

  .logo-icon {
    position: relative;
    width: 36px;
    height: 36px;

    .star-container {
      position: relative;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);

      .star-main {
        font-size: 28px;
        color: #3b82f6;
        transition: all 0.3s ease;
        z-index: 2;
      }

      .star-glow {
        position: absolute;
        font-size: 32px;
        color: #93c5fd;
        opacity: 0.5;
        transform: scale(0.9);
        transition: all 0.4s ease;
        z-index: 1;
      }
    }

    .sparkles {
      position: absolute;
      inset: -4px;

      .sparkle {
        position: absolute;
        font-size: 20px;
        color: #60a5fa;
        opacity: 0;
        transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);

        &:nth-child(1) {
          top: 0;
          right: 0;
          transform: translate(8px, -8px) scale(0.5);
        }
        &:nth-child(2) {
          bottom: 0;
          left: 0;
          transform: translate(-8px, 8px) scale(0.5);
        }
        &:nth-child(3) {
          top: 50%;
          right: -4px;
          transform: translate(8px, -50%) scale(0.5);
        }
      }
    }
  }

  .logo-text {
    position: relative;

    .text-wrapper {
      font-family: 'Montserrat', sans-serif;
      font-weight: 800;
      font-size: 24px;
      letter-spacing: 0.5px;
      display: flex;
      align-items: center;

      .text-star {
        color: #3b82f6;
        transition: color 0.3s ease;
      }

      .text-mist {
        color: #64748b;
        margin-left: 2px;
        transition: color 0.3s ease;
      }
    }
  }

  // 透明状态样式
  &.is-transparent {
    .logo-icon {
      .star-main {
        color: #ffffff;
      }

      .star-glow {
        color: rgba(255, 255, 255, 0.8);
      }

      .sparkles .sparkle {
        color: rgba(255, 255, 255, 0.9);
      }
    }

    .logo-text {
      .text-wrapper {
        .text-star {
          color: #ffffff;
        }

        .text-mist {
          color: rgba(255, 255, 255, 0.9);
        }
      }
    }
  }
}

// 暗色模式
@media (prefers-color-scheme: dark) {
  .logo {
    .logo-icon {
      .star-main {
        color: #60a5fa;
      }

      .star-glow {
        color: #bfdbfe;
      }

      .sparkle {
        color: #93c5fd;
      }
    }

    .logo-text {
      .text-wrapper {
        .text-star {
          color: #60a5fa;
        }

        .text-mist {
          color: #94a3b8;
        }
      }
    }

    &.is-transparent {
      .logo-text {
        .text-wrapper {
          .text-star {
            color: #ffffff;
          }

          .text-mist {
            color: rgba(255, 255, 255, 0.9);
          }
        }
      }
    }
  }
}

// 响应式
@media (max-width: 768px) {
  .logo {
    padding: 6px 12px;

    .logo-icon {
      width: 32px;
      height: 32px;

      .star-container {
        .star-main {
          font-size: 24px;
        }

        .star-glow {
          font-size: 28px;
        }
      }
    }

    .logo-text {
      .text-wrapper {
        font-size: 20px;
      }
    }
  }
}
</style>
